<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getTaskList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="test">测试</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <table class="t">
            <thead>
                <tr>
                    <th style="width:80px">图片
                    </th>
                    <th style="width:60px">
                    </th>
                    <th>订单信息
                    </th>
                    <th style="width:120px">类型
                    </th>
                    <th style="width:120px">环节
                    </th>
                    <th style="width:120px">任务派发时间
                    </th>
                    <th style="width:120px">预期结束时间
                    </th>
                    <th style="width:120px">完成任务时间
                    </th>
                    <th style="width:80px">状态
                    </th>
                    <th style="width:100px">操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr :key='task._id' v-for="(task,index) in taskList" v-bind:class="{currTr: (task._id==taskId) }">
                    <td>

                        <img class='listImg' v-if="task.customerOrder" :src='task.customerOrder.imgUrl'>
                    </td>
                    <td>
                        <template>
                            <el-popover placement="right" width="500px" v-model="task.show">
                                <div v-if="task.show">
                                    <customerOrderShow v-if="task.show" :customerOrderId="task.customerOrderId" :dataType="task.flowClassId"></customerOrderShow>
                                </div>
                                <el-button size="small" slot='reference'><i class="fa fa-eye"></i></el-button>
                            </el-popover>


                        </template>
                    </td>
                    <td class="l">
                        <div v-if="task.customerOrder">
                            <h3>编号:{{task.customerOrder.code}}
                                <el-tag v-if="task._id==taskId" type="gray">刚刚操作</el-tag>
                            </h3>
                            <h3>样衣款号:{{getModelNo(task).proof}}</h3>
                            <h3>大货款号:{{getModelNo(task).bulk}}</h3>
                            <h3>订单名称:{{task.customerOrder.name}} </h3>
                        </div>
                    </td>
                    <td>
                        <span v-text="getFlowClassName(task.flowClassId)"></span>
                    </td>
                    <td> <span v-text="task.nodeName"></span>
                    </td>
                    <td><span v-html="fmtDate(task.createTime)" v-if="(task.statusId>=100)"></span>
                        <span v-else>-</span>
                    </td>
                    <td><span v-html="fmtDate(task.expEndTime)" v-if="(task.statusId>=200)"></span>
                        <span v-else>-</span>
                    </td>
                    <td>
                        <span v-html="fmtDate(task.endTime)" v-if="(task.statusId>=300)"></span>
                        <span v-else>-</span>
                    </td>
                    <td> <span v-text="getTaskStatus(task.statusId).name"></span>
                    </td>
                    <td>
                        <div>
                            <el-button size="small" type="text" @click="showTask(task._id)">查看任务</el-button>
                        </div>
                        <div>
                            <el-button size="small" type="text" @click="toAcceptTask(task._id)" v-if="(task.statusId<200)">接受任务</el-button>
                        </div>
                        <div>
                            <el-button size="small" type="text" @click="doneTask(task._id)" v-if="(task.statusId>=200 && task.statusId<300)">完成任务</el-button>
                        </div>

                    </td>
                </tr>
            </tbody>
        </table>
        <!--列表-->


        <!--工具条-->
        <el-col :span="24" class="toolbar">

            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <myTaskInfo :taskId='taskId' :o='o'></myTaskInfo>


        <el-dialog title="预计完成时间?" :visible.sync="showAcceptTask" size="tiny">
            <div class="block">
                <el-date-picker v-model="expEndTime" type="datetime" :picker-options="pickerOptions1" placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <div style='height:20px'></div>
            <el-button @click="showAcceptTask = false">取 消</el-button>
            <el-button type="primary" @click="acceptTask()">确 定</el-button>
            </span>
        </el-dialog>



    </section>
</template>
<script src="./myTaskList.js"></script>

<style lang="scss" scoped>
    h3 {
        font-weight: normal;
        font-size: 13px;
        line-height: 16px;
        margin: 5px 0 5px 0;
    }

    table.t td.l {
        text-align: left
    }

    .listImg {

        width: 50px;
        height: 50px;
        margin-top: 5px;
    }

    table.t tbody tr.currTr {
        background: #c9e5f5;
    }
</style>